<template>
  <div>
    <el-form :model="ruleForm" label-position="right" class="elForm">
      <!--处置结果-->
      <el-card class="box-card" shadow="never">

        <div slot="header" class="header-card">
          <span class="header-card-title">处置结果</span>
        </div>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="承销商:" prop="underwriterName">
              <span>{{ ruleForm.underwriterName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="初期残值(元):" prop="initialResidualValue">
              <span>{{ ruleForm.initialResidualValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成交价(元):" prop="finalPrice">
              <span>{{ ruleForm.finalPrice }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="差额(元):">
            <span :class="Number(ruleForm.priceDifference) > 0  ? 'greenSpan'
                        : Number(ruleForm.priceDifference) ===0 ? '' :'redSpan' ">
              {{ ruleForm.priceDifference }}
            </span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24" style="padding-top: 16px">
            <el-form-item label="说明:">
              <span>{{ ruleForm.routineRemark }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="padding-top: 16px">
            <el-form-item label="附件:">
              <image-common v-model="ruleForm.routineAttachmentOss" :limit="20" :disabled="true" :upType="2"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--合同信息-->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="header-card">
          <span class="header-card-title">合同信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="合同附件:">
              <image-common v-model="ruleForm.contractOss" :limit="20" :disabled="true" :upType="2"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="padding-top: 16px">
            <el-form-item label="说明:" style="padding-top: 16px">
              <span>{{ ruleForm.contractRemark }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--处置付款信息-->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="header-card">
          <span class="header-card-title">处置付款信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24" style="padding-top: 16px">
            <el-form-item label="付款凭证:">
              <image-common v-model="ruleForm.paymentVoucherOss" :limit="20" :disabled="true" :upType="2"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="padding-top: 16px">
            <el-form-item label="说明:">
              <span>{{ ruleForm.paymentVoucherRemark }}</span>
            </el-form-item>
          </el-col>

        </el-row>
      </el-card>
      <!--违约信息-->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="header-card">
          <span class="header-card-title">违约信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否有违约金:">
              <span>{{ ruleForm.isDefaultPenalty }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="ruleForm.isDefaultPenalty === '有'">
            <el-form-item label="违约金(元):">
              <span>{{ ruleForm.defaultPenalty }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="违约金付款方式:">
              <span v-if="ruleForm.paymentMethod ==='0'">已付金额抵扣</span>
              <span v-if="ruleForm.paymentMethod ==='1'">单独支付</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="附件:" style="padding-top: 16px">
              <image-common v-model="ruleForm.defaultAttachment" :limit="20" :disabled="true" :upType="2"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="padding-top: 16px">
            <el-form-item label="说明:" style="padding-top: 16px">
              <span>{{ ruleForm.defaultSpecification }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="padding-top: 16px">
            <el-form-item label="违约付款凭证:">
              <image-common v-model="ruleForm.paymentVoucher" :limit="20" :disabled="true" :upType="2"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--收款进度-->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="header-card">
          <span class="header-card-title">收款进度</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-table :data="ruleForm.financeProceedsVos" border style="width: 100%">
              <el-table-column align="center" label="操作">
                <template #default="{row,$index}">
                  <el-button size="mini" @click="handleInvoice('开票',row,true)" type="text">开票</el-button>
                  <!--                <el-button size="mini" type="text" >申请负数发票</el-button>-->
                  <el-button size="mini" @click="handleInvoice('开票信息',row,false)" type="text">查看发票</el-button>
                  <!--                <el-button size="mini" type="text" >申请负数发票申请</el-button>-->
                </template>
              </el-table-column>
              <el-table-column align="center" label="应收类型" show-overflow-tooltip prop="proceedsTypeStr">
                <template #default="{row}">
                  {{ selectDictLabel(dict.type.proceeds_type, row.proceedsTypeStr) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="核销状态" show-overflow-tooltip prop="checkStateStr">
                <template #default="{row}">
                  {{ selectDictLabel(dict.type.check_state, row.checkStateStr) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="应收金额" show-overflow-tooltip prop="receivableAmount"/>
              <el-table-column align="center" label="已收金额" show-overflow-tooltip prop="receivedAmount"/>
              <el-table-column align="center" label="代收金额" show-overflow-tooltip prop="waitAmount"/>
              <el-table-column align="center" label="实收时间" show-overflow-tooltip prop="paymentTime">
                <template #default="{row}">
                  {{ row.paymentTime ? $dayjs(row.paymentTime).format('YYYY-MM-DD') : '' }}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
      <!--付款进度-->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="header-card">
          <span class="header-card-title">付款进度</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-table :data="ruleForm.financePaymentVos" border style="width: 100%">
              <el-table-column align="center" label="收款人" show-overflow-tooltip prop="applyUserName"/>
              <el-table-column align="center" label="收款人类型" show-overflow-tooltip prop="payeeTypeStr">
                <template #default="{row}">
                  {{ selectDictLabel(dict.type.payee_type, row.payeeTypeStr) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="收款账户" show-overflow-tooltip prop="payeeBank"/>
              <el-table-column align="center" label="收款账号" show-overflow-tooltip prop="payeeAccount"/>
              <el-table-column align="center" label="应付类型" show-overflow-tooltip prop="paymentTypeStr">
                <template #default="{row}">
                  {{ selectDictLabel(dict.type.payment_type, row.paymentTypeStr) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="应付状态" show-overflow-tooltip prop="paymentStatusStr">
                <template #default="{row}">
                  {{ selectDictLabel(dict.type.payment_status, row.paymentStatusStr) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="应付金额" show-overflow-tooltip prop="paymentAmount"/>
              <el-table-column align="center" label="已付金额" show-overflow-tooltip prop="prepaidAmount"/>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <invoice ref="refInvoice" @reset="reset"/>
  </div>
</template>

<script>
export default {
  name: 'disposalResultMessage',//处置结果  合同信息 处置付款信息  违约信息 收款进度 付款进度
  dicts: [
    'supplier_business_type',
    'payee_type', 'payment_type',
    'payment_status',
    'proceeds_type',
    'check_state'],
  props: {
    value: {
      type: Object,
      default: () => {
      }
    },
  },
  components: {
    invoice: () => import('./invoice.vue'),
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            if (value) {
              that.handleClearValidate(key)
            }
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
  },
  watch: {},
  data() {
    return {};
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleInvoice(type,row,bool){
      this.$refs.refInvoice.handleOpen(type,row,bool)
    },

    reset(){
      this.$emit('reset')
    }
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/cwgd/formScss.scss";

.greenSpan {
  color: green !important;
}

.redSpan {
  color: red !important;
}
</style>


